<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <meta name="description" content=""/>
    <meta name="author" content=""/>
    <title>欢迎注册</title>
    <link href="/static/css/styles.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
            crossorigin="anonymous"></script>
    <script src="/static/js/scripts.js"></script>
    <script>
    function validateForm() {
        var password = document.getElementById('inputEmail').value;
        var confirmPassword = document.getElementById('inputPassword').value;


        // 密码强度验证：至少 8 个字符，包含至少一个大写字母、一个小写字母和一个数字
        var passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/;
        if (!passwordRegex.test(password)) {
            alert('密码至少 8 个字符，包含至少一个大写字母、一个小写字母和一个数字');
            return false;
        }

        // 确认密码验证
        if (password !== confirmPassword) {
            alert('两次输入的密码不一致');
            return false;
        }

        return true;
    }
</script>
</head>
<style>
    .col-lg-7 {
        opacity: .8;
    }

    .bg-primary {
        background-image: url("https://img2.baidu.com/it/u=3192794213,2397967807&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800");
        background-size: cover;
    }
</style>
<body class="bg-primary">
<div id="layoutAuthentication">
    <div id="layoutAuthentication_content">
        <main>
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-7">
                        <div class="card shadow-lg border-0 rounded-lg mt-5">
                            <div class="card-header"><h3 class="text-center font-weight-light my-4">创建账户</h3></div>
                            <div class="card-body">
                                <form method="post" action="/register " onsubmit="return validateForm()">
                                    <div class="row mb-3">
                                        <div class="col-md-12">
                                            <div class="form-floating mb-3 mb-md-0">
                                                <input class="form-control" name="username" id="inputFirstName"
                                                       type="text"
                                                       placeholder="请输入用户名"/>
                                                <label for="inputFirstName">用户名</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-floating mb-3">
                                        <input class="form-control" id="inputEmail" name="password" type="password"
                                               placeholder="请输入密码"/>
                                        <label for="inputEmail">密码</label>
                                    </div>
                                    <div class="row mb-3">
                                        <div class="col-md-12">
                                            <div class="form-floating mb-3 mb-md-0">
                                                <input class="form-control" id="inputPassword" name="passwordCheked"
                                                       type="password" placeholder="确认密码"/>
                                                <label for="inputPassword">确认密码</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="mt-4 mb-0">
                                        <div class="d-grid">
                                            <button class="btn btn-primary btn-block">立即注册
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="card-footer text-center py-3">
                                <div class="small"><a href="/login">已有账号? 去登录</a></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</div>
</body>
</html>
